<template>
	<view class="baseForm">
		<!-- 当前作业 -->
		<view class="activeHeight">
			<!-- 列表 -->
			<u-list ref="tableScroll" class="list" v-if="tableList?.mouldDTOS?.length" :height="listHeight">
				<u-list-item v-for="(item, index) in tableList?.mouldDTOS" :key="item.id" @click="selectWorkOrder(item)">
					<view class="card">
						<view class="flex record-title">
							<text class="line1">设备编号</text>
							<text>
								{{ item.equipCode }}
							</text>
						</view>
						<view class="flex flex-col justify-between flex-1 h-full record-content-body">
							<view class="record-content">
								<view class="record-item">
									<text>物料组</text>
									<text>{{ item.materialGroup }}</text>
								</view>
								<view class="record-item">
									<text>物料</text>
									<text>{{ item.materialCode }}</text>
								</view>
								<view class="record-item">
									<text>工序</text>
									<text class="">
										{{ item.processCode }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<view class="flex justify-center" v-show="tableLoading">
				<u-loading-icon color="#000a7b"></u-loading-icon>
			</view>
			<!-- 空数据 -->
			<view v-show="tableList?.mouldDTOS?.length === 0 && !tableLoading">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
		<u-modal
			:show="showImport"
			ref="uModal"
			:content="`当前设备编号为${selectInfo.equipCode ?? ''}, 请确认是否选择？`"
			confirmText="确认"
			showCancelButton
			@cancel="cancelImport"
			@confirm="confirmImport"
		></u-modal>
	</view>
</template>

<script lang="ts" setup>
import { nextTick, ref, computed } from 'vue';
import { onShow, onPullDownRefresh, onLoad } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { useEamStore } from '@/stores/useEamStore';

const id = ref('');
onLoad((options)=>{
	id.value = options.id;
	loadmore();
})
// 待完成数据
const tableList:any = ref({});
const tableLoading = ref(false);

//列表高度
const listHeight = ref('');

onPullDownRefresh(() => {
	searchList();
});

// 选择设备信息
const deviceList = computed(() => JSON.parse(useEamStore().selectedList));

async function loadmore(type?: string) {
	try {
		tableLoading.value = true;
		console.log('deviceList.value', deviceList.value[0])
		tableList.value = deviceList.value[0];
		tableLoading.value = false;
		type === 'refresh' && uni.stopPullDownRefresh();
	} catch (e) {
		console.log(e);
	}
}

// 点击扫码
const searchText = ref('');
function openScan() {
	/* #ifdef H5 */
	uni.showToast({
		icon: 'none',
		title: '请到安卓设备进行扫码'
	});
	/* #endif */
	// 只允许通过相机扫码
	uni.scanCode({
		scanType: ['barCode', 'qrCode'],
		onlyFromCamera: true,
		success: function (res) {
			searchText.value = JSON.stringify(res.result);
			searchList();
			console.log('条码类型：' + res.scanType);
			console.log('条码内容：' + res.result);
		}
	});
}

// 列表搜索
function searchList() {
	tableList.value = [];
	loadmore('refresh');
}

function clearList() {
	searchText.value = '';
	searchList();
}

// 网页跳转
async function jump(item) {
	const result = tableList.value;
	result.projectMouldDTO = item;
	await useEamStore().setDeviceList(result);
	uni.navigateBack();
}

// 选择设备
const selectInfo: any = ref({});
const showImport = ref(false);
function selectWorkOrder(row) {
	showImport.value = true;
	selectInfo.value = row;
}

// 取消选择设备
function cancelImport() {
	showImport.value = false;
	selectInfo.value = {};
}

// 确定选择
async function confirmImport() {
	
	showImport.value = false;
	uni.showToast({
		title: '选择成功'
	});
	jump(selectInfo.value);
}
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
	background-color: #fbfbff;
}
.search {
	:deep(.u-search__content) {
		box-shadow: 0 1px 8px 0px rgb(19 10 236 / 8%);
	}
}
.baseForm {
	background-color: #fbfbff;
	.tab-bar {
		padding: 0 20px;
	}
	.upload-scan {
		padding: $uni-page-padding;
		padding-top: 5px;
		padding-bottom: 5px;
		display: flex;
		align-items: center;
		// box-shadow: 0 1px 10px 0px rgb(19 10 236 / 10%);
		.u-icon {
			margin-left: 8px;
		}
	}
	.u-line {
		padding: 10px 0;
	}
}
.list {
	.card {
		margin: $uni-page-padding;
		margin-top: 5px;
		margin-bottom: 4px;
		border-radius: 7px;
		padding: 11px 10px 0px 10px;
		transition: all 300ms ease;
		// border: 1px solid #efefef;
		background-color: #fff;
		box-shadow: 0 1px 5px rgb(19 11 236 / 13%);
		.card-flex {
			display: flex;
			align-items: flex-start;
		}
		.right {
			flex: 1;
		}
		.title {
			font-size: 14px;
			line-height: 40px;
			height: 40px;
			margin-top: 8px;
			font-weight: bold;
			color: #101010;
			border-top: 1px solid #e5ebff;
		}
		.uni-btn {
			float: right;
			font-size: 12px;
			height: 24px;
			line-height: 24px;
			padding: 0 15px;
			margin-top: 7px;
			font-weight: 400;
		}
		.des {
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 3px;
		}
		.left {
			flex-basis: calc(50% + 10px);
		}
	}
}

.record-title {
	display: flex;
	justify-content: space-between;
	margin: 2px 0 2px 0;
	color: $primary-color;
	uni-text:nth-child(1) {
		font-weight: bold;
		font-size: 15px;
	}
	uni-text:nth-child(2) {
		font-weight: bold;
		font-size: 15px;
		min-width: 60px;
		text-align: right;
	}
}
.record-item {
	margin: 6px 0 !important;
	color: #8f8e94 !important;
	font-size: 14px;
}
.record-content .record-item > :first-child {
	min-width: 65px;
}
</style>
